What is opacity in CSS?

The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. A in the range 0.0 to 1.0, inclusive, or a in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel).

What is element opacity?

The opacity property indicates the transparency of an element. It is generally indicated on a scale of 0 to 1, where 0 is completely transparent. That means it is completely invisible. Likewise, 1 is completely opaque, and 0.5 can be considered the benchmark of element opacity as it is 50% see-through.

Does opacity affect text?

So, the opacity affects the text as well, not only the image. This is probably not what you want! By default, when you apply an opacity to a container, the descendants inherit it as well. A workaround in this situation is to set the background image in the HTML.

What is the opacity of a logo?

An opacity value of 1 is the default, so the image appears like this: This code gives us 50% opacity, and you can see that the logo has faded a bit: With an opacity of 0, the image is 100% transparent, so it becomes invisible: The only way to be sure the image is on the page is to inspect it with your browser devtools: